import Base from "../base.js";
import SchedulesService from "../../service/SchedulesService.js"
export default class extends Base {

  constructor(props) {
    super(props);
    this.data=SchedulesService.getSchedulesData("_theaters").length?SchedulesService.getSchedulesData("_theaters"):""    
  }
  render(){
      const template = `
      <a  class="layui-btn  layui-btn-radius  layui-btn-primary" href="#/info/addSchedules">返回新增</a>
        <table id="table" lay-filter="table"></table>
      `;
      this.$el.html(template);
     $(".info-content").append(`
     <table id="seating" lay-filter="seating"></table>
     
     `)
 }
 async getSeating(_id){
   return await SchedulesService.getSeatBySchedules(_id)
  }
  renderSeating(result){
    this.table.render({
        elem: '#seating',
        page: true, //开启分页
        data:result
          ,
        cols: [
          [ //表头
      
            {
              field: '_id',
              title: 'ID',
              sort: true,
              fixed: 'left'
            }, {
              field: 'scheduleId',
              title: `影院名`,
              templet:()=>{
                return this.odderData.cinemasId.name
              }
            }, {
              field: 'scheduleId',
              title: `影厅名`,
              templet:()=>{
                return this.odderData.theaterId.name
              }
            }, {
              field: 'seatId',
              title: '座位',
              align:"center",
              sort: true,
              templet: (data)=>{
           
                return data.seatId.seat
              } 
            },
            {
                field: 'status',
                title: '状态',
                align:"center",
                sort: true,
                templet: (data)=>{
                    
                  return data.status?"已售":"未出售"
                } 
              },
            {
              field: 'play',
              title: '操作',
              toolbar: `
          <div>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="on">设置未售</a>
          <a class="layui-btn layui-btn-xs" lay-event="off">设置已售</a>
          </div>
          `
            }
          ]
        ]
      });
  }
  handle(){
    var that=this;
    this.table.on('tool(seating)',async function(obj){
      var data = obj.data;
      var layEvent = obj.event; 
      if (layEvent === 'on') {
          await SchedulesService.updateSeating({status: 0},data._id)
          const result= await that.getSeating(that.odderData._id)
          that.renderSeating(result)
      }else if(layEvent === 'off'){
          await SchedulesService.updateSeating({status: 1},data._id)
          const result= await that.getSeating(that.odderData._id)
          that.renderSeating(result)
      }
      
    })
    this.table.on('tool(table)',async function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'detail'){ //查看
      const result= await that.getSeating(data._id)
      that.odderData=data
      that.renderSeating(result)
      //do somehing
    } else if(layEvent === 'del'){ //删除
      layer.confirm('确定删除该排片？', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
        SchedulesService.delete(data)
      });
    } else if(layEvent === 'edit'){ //编辑
     SchedulesService.setSchedulesData("_updataSchedule",data)
     location.hash="#/info/updataSchedule"
    }
  });
  }
   layui() {
    this.data = this.data.filter(v=>(v.movieId&&v.cinemasId&&v.theaterId));
    this.table.render({
      elem: '#table',
      page: true, //开启分页
      data:this.data
        ,
      cols: [
        [ //表头
    
          {
            field: '_id',
            title: 'ID',
            sort: true,
            fixed: 'left'
          }, {
            field: 'movieId',
            title: '电影',
            align:"center",
            templet: (data)=>{
              return data.movieId.cname
            }
            
          }, {
            field: 'cinemasId',
            title: '影院',
            templet: (data)=>{
              return data.cinemasId.name
            } 
          }, {
            field: 'theaterId',
            title: '放映厅',
            align:"center",
            sort: true,
            templet: (data)=>{
              return data.theaterId.name
            } 
          },
          {
            field: 'showTime',
            title: '放映时间',
            align:"center",
            sort: true
          },
          {
            field: 'price',
            title: '价格',
            align:"center",
            sort: true
          },
          {
            field: 'play',
            title: '操作',
            width: 200,
            toolbar: `
        <div>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">查看座位</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">更新</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </div>
        `
          }
        ]
      ]
    });

    
  } 

}
